<template>
    <div>
        <div class="d-flex align-items-center">
              <!-- 左边按钮 -->
              <slot name="left"></slot>
              <!-- 右边 -->
              <div class="ml-auto" v-show="!superSearch" v-if='showSearch'>
                  <slot name="right">
                        <el-input class="mr-3" style="width:150px" v-model="keyword" :placeholder="placeholder" size="mini"></el-input>
                        <el-button type="info" size="mini" @click="$emit('search',keyword)">搜索</el-button>
                        <el-button size="mini" @click="superSearch=true">高级搜索</el-button>
                  </slot>
              </div>
          </div>
          <!-- 超级搜索卡片 -->
          <el-card class="bg-light my-3" v-show="superSearch">
              <div slot="header" class="clearfix" style="margin:-10px">
                  <span @click="$emit('superSearchEvent')">高级搜索</span>
                  <el-button type="text" style="float:right;padding:3px 0" 
                  class="mr-3" @click="closeSuperSearch">收起</el-button>
              </div>
              <slot name="form"></slot>
          </el-card>
          <!-- /超级搜索卡片 -->
    </div>
</template>
<script>
export default {
   data() {
      return {
          keyword: '',
          superSearch: false
      }
   },
   components: {
   },
   props: {
       placeholder:{
           type: String
       },
       showSearch:{
           type:Boolean,
           default:true
       }
   },
   created(){
   },
   computed:{
   },
   watch:{
   },
   methods:{
       closeSuperSearch() {
           this.superSearch = false
       }
   },
}
</script>
<style lang="less" scoped>

</style>
